﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {margin:20px 20px 0;overflow-x:hidden;overflow-y:auto;font-family:sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            font-weight: 300;}
        .container {}
        .container > div {text-align:center;font-size:24px;cursor:pointer;margin: 0;display:inline-block;float:left;width:25%;height:80px;line-height:80px;border:#eee 1px solid;box-sizing:border-box;}
        .clearfix:before, .clearfix:after {content: " ";display: table;}
        .clearfix:after {clear: both;}
        .clearfix {*zoom: 1;}
        
        .inptext {
            width: 90%;
            height: 45px;
            box-sizing: border-box;
            margin: 0;
            font-family: sans-serif;
            font-size: 15px;
            letter-spacing: 1px;
            padding: 0;
            padding-left: 8px;
            color: #111111;
            display: inline-block;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 0;
            background-color: #fbfbfb; 
        }
        button {
            width: 55px;
            height: 45px;
            background-color: rgba(255, 255, 255, 0.95);
            color: #111111;
            font-family: sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            font-weight: 300;
            border: transparent 1px solid;
            box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);
            opacity: 1;
            line-height: 1;
            display: inline-block;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            cursor: pointer;
            text-transform: none;
            text-align: center;
            position: relative;
            border-radius: 0;
            user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -o-user-select: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;       
        }
        .inptext:focus {outline:none}
        button:focus {outline:none;}
    </style>
</head>
<body>

<div style="display:flex;justify-content:space-between;">
    <input id="txtSearch" tabindex="1" class="inptext" type="text" style="width:100%;" value="" />
    <button class="input-search" style="width:130px;">Search Next</button>
</div>
<div style="margin:10px 0">
    <label for="txtReplaceWith">Replace with:</label>
</div>
<div style="display:flex;justify-content:space-between;">
    <input id="txtReplaceWith" tabindex="2" class="inptext" type="text" style="width:100%;" value="" />
    <button class="input-replace" style="width:130px;">Replace</button>
</div>
<div style="display:flex;justify-content:space-between;margin:17px 0;">
    <div>
        <label id="lblMatchCase" for="chkMatchCase">
            <input type="checkbox" name="chkMatchCase" id="chkMatchCase"> Match case
        </label>
        <div id="divStatus" style="margin-top:12px;"></div>
    </div>
    <button class="input-replaceall" style="width:130px;">Replace All</button>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    var nReplaceCount = 0;
 
    jQuery(document).ready(function () {

        jQuery('#txtSearch').focus();

        jQuery('.input-replaceall').click(function () {
            jQuery('#divStatus').html('');

            var target = jQuery('#txtSearch').val();
            var replaceWith = jQuery('#txtReplaceWith').val();
            if (jQuery("#chkMatchCase").prop("checked")) {
                var bMatchCase = true;
            } else {
                var bMatchCase = false;
            }

            var within = parent._cb.getScope();

            var sel = parent.getSelection();

            var r1 = parent.document.createRange();
            r1.selectNodeContents(within);

            // https://stackoverflow.com/questions/32192664/how-to-select-a-given-string-repeatedly-within-the-text-of-a-contenteditable-ele
            if (sel.toString().search(target) > -1) {
                var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
                if (ok) {
                    var rng = parent.getSelection().getRangeAt(0);
                    rng.deleteContents();
                    rng.insertNode(document.createTextNode(replaceWith));
                    nReplaceCount++;
                }
                jQuery('.input-replaceall').trigger('click');
            } else if (sel.toString().length > 0) {
                var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
                if (ok) {
                    var rng = parent.getSelection().getRangeAt(0);
                    rng.deleteContents();
                    rng.insertNode(document.createTextNode(replaceWith));
                    nReplaceCount++;
                }
                jQuery('.input-replaceall').trigger('click');
            } else if (sel.rangeCount) {
                var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
                if (ok) {
                    var rng = parent.getSelection().getRangeAt(0);
                    rng.deleteContents();
                    rng.insertNode(document.createTextNode(replaceWith));
                    nReplaceCount++;
                    jQuery('.input-replaceall').trigger('click');
                } else {
                    jQuery('#divStatus').html(nReplaceCount + ' occurrence(s) replaced.');
                    nReplaceCount = 0;
                }
            } 
        });

        jQuery('.input-search').click(function () {

            var target = jQuery('#txtSearch').val();
            var replaceWith = jQuery('#txtReplaceWith').val();
            if (jQuery("#chkMatchCase").prop("checked")) {
                var bMatchCase = true;
            } else {
                var bMatchCase = false;
            }

            var within = parent._cb.getScope();

            var sel = parent.getSelection();

            var r1 = parent.document.createRange();
            r1.selectNodeContents(within);
            
            if (sel.toString().search(target) > -1) {
                var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
                if (ok) {
                    jQuery('#divStatus').html('');
                } else {

                }
            } else if (sel.toString().length > 0) {
                var ok = parent.findOne(target, bMatchCase, within, sel.focusNode, sel.focusOffset);
                if (ok) {
                    jQuery('#divStatus').html('');
                } else {
                    jQuery('#divStatus').html('Passed the end of the content.');
                    var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
                    if (ok) {
                        jQuery('#divStatus').html('');
                    } else {
                        jQuery('#divStatus').html('The specified text was not found.');
                    }
                }
            } else if (sel.rangeCount) {
                var ok = parent.findOne(target, bMatchCase, within, sel.anchorNode, sel.anchorOffset);
                if (ok) {
                    jQuery('#divStatus').html('');
                } else {
                    var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
                    if (ok) {
                        jQuery('#divStatus').html('');
                    } else {
                        jQuery('#divStatus').html('The specified text was not found.');
                    }
                }
            }

        });

        jQuery('.input-replace').click(function () {

            var target = jQuery('#txtSearch').val();
            var replaceWith = jQuery('#txtReplaceWith').val();
            if (jQuery("#chkMatchCase").prop("checked")) {
                var bMatchCase = true;
            } else {
                var bMatchCase = false;
            }

            var within = parent._cb.getScope();

            var sel = parent.getSelection();

            var r1 = parent.document.createRange();
            r1.selectNodeContents(within);

            var text = getSelected(parent);
            if (text) {
                if ((((text + '').toLowerCase() == target.toLowerCase()) && bMatchCase==false) ||
                    ((text == target) && bMatchCase == true)) {
                    var rng = parent.getSelection().getRangeAt(0);
                    rng.deleteContents();
                    rng.insertNode(document.createTextNode(replaceWith));
                }
            }

            if (sel.rangeCount) {
                var ok = parent.findOne(target, bMatchCase, within, sel.anchorNode, sel.anchorOffset);
                if (ok) {
                    jQuery('#divStatus').html('');
                } else {
                    var ok = parent.findOne(target, bMatchCase, within, r1.commonAncestorContainer, r1.startOffset);
                    if (ok) {
                        jQuery('#divStatus').html('');
                    } else {
                        jQuery('#divStatus').html('The specified text was not found.');
                    }
                }
            }
        });

    });

    function getSelected(window) {
        if (window.getSelection) { return window.getSelection(); }
        else if (document.getSelection) { return document.getSelection(); }
        else {
            var selection = document.selection && document.selection.createRange();
            if (selection.text) { return selection.text; }
            return false;
        }
        return false;
    }

</script>
</body>
</html>
